<template>
  <div style="max-width: 900px; margin: auto">
    <header>
      <section>
        <v-md-preview style="text-align: left" :text="text"/>
      </section>
    </header>

    <section style="text-align: left;">
      <el-select v-model="codeData.lang" style="width: 160px">
        <el-option :label="'Java(jdk8)'" :value="'java8'"></el-option>
        <el-option :label="'C(gcc)'" :value="'gcc'"></el-option>
        <el-option :label="'C++(g++)'" :value="'g++'"></el-option>
        <el-option :label="'Python(python3)'" :value="'python3'"></el-option>
        <el-option :label="'Python(python2)'" :value="'python2'"></el-option>
      </el-select>
      <CodemirrorEditor v-model="codeData.code" :codeLang="codeData.lang" :lang="'cpp'" :style="{ height: '500px', fontSize: '18px' }"></CodemirrorEditor>
      <el-button type="primary" @click="postCodeHandler">提交</el-button>
      <div v-if="codeResult !== '' && codeResult.compileResult !== ''">
        <pre style="margin: 0; text-align: left" v-for="(item,index) in codeResult.compileResult" :key="index">{{item}}</pre>
      </div>
      <div v-if="codeResult !== '' && codeResult.runResult !== ''">
        {{codeResult.runResult}}
        <hr>
        <div>
          结果对照表
          <div v-for="(item,index) in RESULT_STR" :key="index+100" ><span>{{index}}</span><span>{{item}}</span></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import CodemirrorEditor from '@/components/codemirror-editor/CodemirrorEditor'
import { ref } from 'vue'
import { postCode } from '@/api/code'
const RESULT_STR = ['通过',
  '格式错误',
  '运行超时',
  '内存超限',
  '答案错误',
  '运行时错误',
  '输出结果超限',
  '编译错误',
  '系统错误'
]
export default {
  name: 'CodeView',
  components: {
    CodemirrorEditor
  },
  setup () {
    return {
      RESULT_STR,
      codeData: ref({
        code: '',
        lang: 'g++',
        subjectId: ''
      }),
      codeLang: ref('cpp'),
      codeResult: ref(''),
      text: ref('' +
        '# $A+B$\n' +
        '\n' +
        '\n' +
        '## 题目背景 ##\n' +
        '强烈推荐新用户必读帖。\n' +
        '\n' +
        '不熟悉算法竞赛的选手请看这里：\n' +
        '\n' +
        '算法竞赛中要求的输出格式中，不能有多余的内容，这也包括了“请输入整数 $\n' +
        'a$ 和$b$ ” 这一类的提示用户输入信息的内容。若包含了这些内容，将会被认为是`Wrong Answer `，即洛谷上的 WA。在对比代码输出和标准输出时，系统将忽略每一行结尾的空格，以及最后一行之后多余的换行符。\n' +
        '\n' +
        '若因此类问题出现本机（看起来）AC，提交 WA 的现象，请勿认为是洛谷评测机出了问题，而是你的代码中可能存在多余的输出信息。用户可以参考在题目末尾提供的代码。\n' +
        '\n' +
        '另外请善用应用中的在线 IDE 功能，以避免不同平台的评测中所产生的一些问题。\n' +
        '\n' +
        '还有一点很重要的是，请不要在对应的题目讨论区中发布自己的题解，请发布到题解区域中，否则将处以删除或禁言的处罚。若发现无法提交题解则表明本题题解数量过多，仍不应发布讨论。\n' +
        '\n' +
        '## 题目描述\n' +
        '输入两个整数 $a,b$，输出它们的和$( ∣a∣,∣b∣≤10^{9} )$。\n' +
        '\n' +
        '### 注意\n' +
        '\n' +
        'Pascal 使用 integer 会爆掉哦！\n' +
        '有负数哦！\n' +
        'C/C++ 的 main 函数必须是 int 类型，而且 C 最后要 return 0。这不仅对洛谷其他题目有效，而且也是 NOIP/CSP/NOI 比赛的要求！\n' +
        '好吧，同志们，我们就从这一题开始，向着大牛的路进发。\n' +
        '\n' +
        '任何一个伟大的思想，都有一个微不足道的开始。\n' +
        '\n' +
        '### 输入格式\n' +
        '两个以空格分开的整数。\n' +
        '\n' +
        '### 输出格式\n' +
        '一个整数。\n' +
        '\n' +
        '## 输入输出样例\n' +
        '\n' +
        '#### 输入 #1\n' +
        '```\n' +
        '20 30\n' +
        '```\n' +
        '#### 输出 #1\n' +
        '```\n' +
        '50\n' +
        '\n' +
        '```')
    }
  },
  methods: {
    postCodeHandler () {
      postCode(this.codeData).then((val) => {
        console.log(val)
        this.codeResult = val.data
      })
    }
  }
}
</script>

<style scoped>

</style>
